<template>
	<view class="box-content">
		<view class="userTopBox" v-if="isLogin" @click="goPage('/myPages/pages/mypage?artisterID='+userInfo.UserID)">
			<head-wear :userInfo="userInfo" :UserLevelID="userInfo.UserLevelID" :WxHeadPic="userInfo.WxHeadPic"
				image-height="30" image-width="34" size="20" right="0" bottom="-5"></head-wear>

			<view class="userInfo">
				<view class="userInfo-title">

					<view class="">
						{{userInfo.NickName ? userInfo.NickName : '正在加载..'}}
					</view>

					<auth-label size="16" height="28" v-if="userInfo.isAuthOk == 2"></auth-label>
					<personality-label size="16" height="28" v-if="userInfo.BeautifulWomen == 1"></personality-label>
					<image :src="baseUrl + 'icon/enterprise.png'" class="company-image-size marginLeft-10"
						v-if="CompanyInfo.isAuthOk && CompanyInfo.isAuthOk == 2"></image>

				</view>
				<view style="color:#999; font-size:24rpx">
					<text v-for="(item,index) in userRole" :key="index">
						{{ item.LabelName }}
						<text decode=“true” v-if="index < userRole.length - 1">，</text>
					</text>
				</view>
			</view>

			<view class="authLink" @click.stop="goPage('/myPages/pages/auth')">申请认证</view>
		</view>
		<view v-else class="userTopBox">
			<view class="userHeadPic" @click="goLogin"></view>
			<view class="userInfo">
				<view style="font-size:32rpx" @click="goLogin">立即登录 ></view>
				<view style="color:#999;line-height:30px;" @click="goLogin">点击登录</view>
			</view>
		</view>

		<view class="countLink">
			<view @click="goPage('/myPages/pages/fangke')">
				<view class="count w-60">
					{{ userCount.renqi }}
				</view>
				<view class="countName w-60" style="position:relative;">
					<fui-badge type="danger" scaleRatio="0.7" absolute right="-10rpx" dot
						v-if="isLogin && userCount.renqix !== 0"></fui-badge>
					<text>人气</text>
				</view>
			</view>
			<view @click="goPage('/myPages/pages/fensi')">
				<view class="count w-60">{{ userCount.fensi }}</view>
				<view class="countName w-60" style="position:relative;">
					<fui-badge type="danger" scaleRatio="0.7" absolute right="-10rpx" dot
						v-if="isLogin && userCount.fensix !== 0"></fui-badge>
					<text>粉丝</text>
				</view>
			</view>
			<view @click="goPage('/myPages/pages/guanzhu')">
				<view class="count w-60">{{ userCount.guanzhu }}</view>
				<view class="countName w-60">关注</view>
			</view>
			<view @click="goPage('/myPages/pages/myshow')">
				<view class="count w-60">{{ userCount.liulan }}</view>
				<view class="countName w-60">浏览</view>
			</view>
		</view>

		<view class="MemberBoxs">
			<view class="MemberRegLink flexbc">
				<view class="vipIcon" @click="testqrcode">
					<image :src="baseUrl + 'icon/integral.png'"></image>
				</view>
				<view style="width:380rpx;padding:5rpx">
					<view style="font-size:30rpx">美模通告VIP</view>
					<view>开通会员享更多权益</view>
				</view>
				<view class="openVipBtn" @click="goPage('/myPages/pages/openMember')">立即开通</view>
			</view>
			<view class="MemberBox">
				<view class="myLink" @click="goPage('/myPages/pages/myWallet?UserID=' + userInfo.UserID)">
					<view class="myLinkIcon">
						<image :src="baseUrl + 'icon/redpacket.png'"></image>
					</view>
					<view class="myLinkName">金币</view>
				</view>
				<view class="myLink" @click="goPage('/myPages/pages/addressManage')">
					<view class=" myLinkIcon">
						<fui-icon name="location" color="#000" :size="45"></fui-icon>
					</view>
					<view class="myLinkName">地址</view>
				</view>
				<view class="myLink" @click="goPage('/myPages/pages/income')">
					<view class="myLinkIcon" style="position:relative;">
						<fui-badge type="danger" scaleRatio="0.7" absolute right="-10rpx" dot
							v-if="isLogin && userCount.dashang !== 0"></fui-badge>
						<image :src="baseUrl + 'icon/gift.png'"></image>
					</view>
					<view class="myLinkName">礼物</view>
				</view>
				<view class="myLink" @click="goPage('/myPages/pages/myfav')">
					<view class="myLinkIcon">
						<image :src="baseUrl + 'icon/fav_a.png'"></image>
					</view>
					<view class="myLinkName">收藏</view>
				</view>
				<view class="myLink" @click="handleSignin">
					<view class="myLinkIcon">
						<image :src="baseUrl + 'icon/editor.png'"></image>
					</view>
					<view class="myLinkName">签到</view>
				</view>
			</view>
		</view>

		<view class="QuickLinkBoxs">
			<view class="QuickLinkBox">
				<fui-list>
					<fui-list-cell arrow @click="goPage('/myPages/pages/myTonggao')">

						<view class=""
							style="flex: 1;display:flex;flex-direction: row;justify-content: space-between;align-items: center;">
							<view class=""
								style="display:flex;flex-direction: row;justify-content: flex-start;align-items: center;">
								<image :src="baseUrl + 'icon/systemprompt.png'" class="listIcon"
									style="width:45rpx;height:45rpx;"></image>
								<text>通告管理</text>
							</view>
							<view class="" style="font-size: 28rpx;color: #ff5252;"
								v-if="isLogin && Object.keys(UserNoticeCount).length != 0">
								<text
									v-if="UserNoticeCount.daishenhe != 0">{{ UserNoticeCount.daishenhe ? UserNoticeCount.daishenhe : 0 }}个审核中</text>
								<text style="margin-left: 10rpx;"
									v-if="UserNoticeCount.daikaifang != 0">{{ UserNoticeCount.daikaifang ? UserNoticeCount.daikaifang : 0 }}个待开放</text>
								<text style="margin-left: 10rpx;"
									v-if="UserNoticeCount.kaifangzhong != 0">{{ UserNoticeCount.kaifangzhong ? UserNoticeCount.kaifangzhong : 0 }}个在招</text>
							</view>
						</view>

					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/pages/myYuedan')">
						<image :src="baseUrl + 'icon/activity.png'" class="listIcon"></image>
						<text>约单管理</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/pages/myReceiveContact')">
						<image :src="baseUrl + 'icon/arter.png'" class="listIcon"></image>
						<text>我收到的极速联系</text>
					</fui-list-cell>
				</fui-list>
			</view>

			<view class="QuickLinkBox">
				<fui-list>
					<fui-list-cell arrow @click="goPage('/myPages/pages/noteBaoming')">
						<image :src="baseUrl + 'icon/task.png'" class="listIcon"></image>
						<text>我报名的通告</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/pages/yuedanRequest')">
						<image :src="baseUrl + 'icon/myyudan.png'" class="listIcon" style="width:35rpx;height:35rpx;">
						</image>
						<text>我请求的约单</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/pages/myInitiateContact')">
						<image :src="baseUrl + 'icon/mymessage.png'" class="listIcon" style="width:35rpx;height:35rpx;">
						</image>
						<text>我发起的极速联系</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/pages/index/complaint/complaintList')">
						<image :src="baseUrl + 'icon/complaintList.png'" class="listIcon"
							style="width:35rpx;height:35rpx;">
						</image>
						<text>我的历史投诉建议</text>
					</fui-list-cell>
				</fui-list>
			</view>

			<view class="QuickLinkBox">
				<fui-list>
					<fui-list-cell arrow @click="goPage('/myPages/pages/Moka')">
						<image :src="baseUrl + 'icon/manage.png'" class="listIcon"></image>
						<text>我的模卡</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/pages/Works')">
						<image :src="baseUrl + 'icon/picture.png'" class="listIcon"></image>
						<text>我的作品</text>
					</fui-list-cell>
				</fui-list>
			</view>

			<view class="QuickLinkBox">
				<fui-list>
					<fui-list-cell arrow @click="goPage('/myPages/MyAdvter/list')">
						<image src="/static/myIcon/tj.png" class="listIcon"></image>
						<text>推荐管理</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/MyDynamic/list')">
						<image src="/static/myIcon/dt.png" class="listIcon"></image>
						<text>动态管理</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/MyRecruit/list')">
						<image src="/static/myIcon/zp.png" class="listIcon"></image>
						<text>招聘管理</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/MyGoods/list')">
						<image src="/static/myIcon/sp.png" class="listIcon"></image>
						<text>商品管理</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/MyTask/list')">
						<image src="/static/myIcon/rw.png" class="listIcon"></image>
						<text>任务管理</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/MyActive/list')">
						<image src="/static/myIcon/hd.png" class="listIcon"></image>
						<text>活动管理</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/DeliverGoods/list')">
						<image src="/static/myIcon/fh.png" class="listIcon"></image>
						<text>发货管理</text>
					</fui-list-cell>
				</fui-list>
			</view>

			<view class="QuickLinkBox">
				<fui-list>
					<fui-list-cell arrow @click="goPage('/myPages/JoinRecruit/list')">
						<image src="/static/myIcon/zp.png" class="listIcon"></image>
						<text>我报名的招聘</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/JoinTask/list')">
						<image src="/static/myIcon/rw.png" class="listIcon"></image>
						<text>我参加的任务</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/JoinActive/list')">
						<image src="/static/myIcon/hd.png" class="listIcon"></image>
						<text>我参加的活动</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/PurchaseGoods/list')">
						<image src="/static/myIcon/sp.png" class="listIcon"></image>
						<text>我购买的商品</text>
					</fui-list-cell>
				</fui-list>
			</view>

			<view class="QuickLinkBox">
				<fui-list>
					<fui-list-cell arrow @click="goPage('/myPages/pages/auth')">
						<image :src="baseUrl + 'icon/works.png'" class="listIcon"></image>
						<text>申请认证</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/pages/companyData')" v-if="CompanyInfo.isAuthOk == 2">
						<view class=""
							style="flex: 1;display:flex;flex-direction: row;justify-content: space-between;align-items: center;">
							<view class=""
								style="display:flex;flex-direction: row;justify-content: flex-start;align-items: center;">
								<image :src="baseUrl + 'icon/UserEnterprise.png'" class="listIcon"></image>
								<text>公司主页</text>
							</view>
							<view style="font-size: 28rpx;color: #ff5252;" v-if="!CompanyInfo.Info">待完善</view>
						</view>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/pages/invite')">
						<image :src="baseUrl + 'icon/order.png'" class="listIcon"></image>
						<text>邀请好友</text>
					</fui-list-cell>
				</fui-list>
			</view>

			<view class="QuickLinkBox">
				<fui-list>
					<fui-list-cell arrow @click="goPage('/pages/content?cid=12')">
						<image :src="baseUrl + 'icon/interactive.png'" class="listIcon"
							style="width:45rpx;height:45rpx;">
						</image>
						<text>帮助中心</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/myPages/pages/about')">
						<image :src="baseUrl + 'icon/headlines.png'" class="listIcon" style="width:45rpx;height:45rpx;">
						</image>
						<text>关于我们</text>
					</fui-list-cell>
					<fui-list-cell arrow @click="goPage('/pages/content?cid=13')">
						<image :src="baseUrl + 'icon/msg.png'" class="listIcon"></image>
						<text>联系客服</text>
					</fui-list-cell>
				</fui-list>
			</view>

			<view v-if="isLogin">
				<button class="exitBtn" @click="logout">退出登录</button>
			</view>

			<!-- 	<view>
				<image :src="Qrcode" mode="aspectFill" style="width:200rpx;height:200rpx"></image>
			</view> -->

			<view class="bottom" style="height:50rpx;"></view>
		</view>
		<fui-landscape :show="SigninPop" maskClosable @close="closeSignin">
			<view style="width:80vw;height:600rpx;background:#FFF;border-radius:20rpx;">
				<view
					style="height:300rpx;padding-top:100rpx;background-color:#FFFFCC;text-align:center;border-radius:20rpx;">
					<view style="font-size:50rpx;font-weight:bold">签到成功</view>
					<view style="width:180rpx;margin:auto;display:flex;margin-top:30rpx">
						<image :src="baseUrl + 'icon/goldcoin.png'" style="width:50rpx;height:50rpx;"></image>
						<text style="margin-left:40rpx;font-size:36rpx;"> + 1</text>
					</view>
					<view style="font-size:28rpx;margin-top:40rpx;">邀请好友可获得更多金币</view>
				</view>
				<view style="margin-top:40rpx;">
					<button
						style="background-color:#FFDD00;width:90%;height:70rpx;line-height:70rpx;border-radius:30rpx;"
						@click="goToInvite">去邀请</button>
				</view>
			</view>
		</fui-landscape>
	</view>
</template>

<script>
	import AuthLabel from "@/components/authLabel.vue";
	import PersonalityLabel from "@/components/personalityLabel.vue";
	import HeadWear from "@/components/headwear.vue"
	export default {
		components: {
			AuthLabel,
			PersonalityLabel,
			HeadWear
		},
		data() {
			return {
				isLogin: false,
				LoginInfo: {
					isLogin: 0,
					UserInfo: {}
				},
				isLoginShow: false,
				isLoginShowContent: '您还没有登录，请先登录！',
				userInfo: {},
				userRole: [],
				userCount: {
					renqi: 0,
					fensi: 0,
					guanzhu: 0,
					liulan: 0
				},
				SigninPop: false,
				Qrcode: '',
				UserNoticeCount: {},
				isLoadingFinish: false,
				baseUrl: '',
				// 企业信息
				CompanyInfo: {}
			};
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
		},
		onShow() {

			if (uni.getStorageSync("isLogin")) {
				this.isLogin = true
				// console.log('getStorageSyncTrue', uni.getStorageSync("isLogin"))
				this.LoginInfo = uni.getStorageSync("isLogin");
				this.onGetUserLogin();
			} else {
				this.isLogin = false
				this.LoginInfo = {
					isLogin: 0,
					UserInfo: {}
				}

				this.isLoginShow = false
				// this.goLogin()
			}
			// console.log('this.LoginInfo' , this.LoginInfo)
		},
		methods: {
			testqrcode() {
				this.$httpost('/Wechat/index', {}).then(res => {})
			},
			goToInvite() {
				this.$common.goNavPage('/myPages/pages/invite')
			},
			handleSignin() {
				if (uni.getStorageSync("isLogin")) {
					this.$httpost('/UserAction/Signin', {}).then(res => {
						// console.log('signin', res);
						if (res.code == 200) {
							if (res.data.signinState === 1) {
								this.SigninPop = true
							} else {
								uni.showToast({
									title: '今日已签过到！',
									icon: 'none'
								})
							}
						}
					});
				} else {
					this.$common.goNavPage('/pages/login/weixinlogin')
				}
			},
			closeSignin() {
				this.SigninPop = false
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/weixinlogin'
				})
			},
			onGetUserLogin() {
				this.$httpost('/Login/isLogin', {}).then(res => {
					// console.log('isLogin', res)
					if (res.code == 200) {
						if (res.data.LoginInfo) {
							this.LoginInfo = res.data.LoginInfo
							if (this.LoginInfo.UserID > 0) {
								this.isLogin = true
								this.getUserInfo()
							} else {
								this.goLogin()
							}
						} else {
							this.goLogin()
						}
					}
				});
			},
			getUserInfo() {
				this.isLoadingFinish = false;
				this.$httpost('/UserCenter/index', {}).then(res => {
					// console.log('接口返回数据：', res)
					if (res.code == 200) {
						this.CompanyInfo = res.data.CompanyInfo;
						this.userInfo = res.data.UserInfo;
						if (res.data.UserRole.length == 0 || res.data.UserInfo.UserSex == null) {
							this.$common.goNavPage('/myPages/pages/userBaseSet')
						}
						this.UserNoticeCount = res.data.UserNoticeCount;
						this.userRole = res.data.UserRole
						this.userCount = res.data.UserCount

						if (res.data.UserCount.renqix + res.data.UserCount.fensix + res.data.UserCount.dashang ==
							0) {
							uni.hideTabBarRedDot({
								index: 4
							})
						} else {
							uni.showTabBarRedDot({
								index: 4
							})
						}
						// console.log('this.isLoadingFinish', this.isLoadingFinish)
						this.isLoadingFinish = true;
					}
				})

			},
			goPage(url) {

				if (uni.getStorageSync("isLogin")) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.goLogin()
				}

			},
			logout() {

				uni.showModal({
					title: '确定要退出登录？',
					content: '退出后将不能进行相关操作，可重新再登录',
					success: (res) => {
						if (res.cancel) {

						} else if (res.confirm) {
							uni.removeStorageSync("token")
							uni.removeStorageSync("isLogin")

							this.$common.goSwtPage('/pages/index/index')
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userTopBox {
		height: 120rpx;
		padding: 30rpx;
	}

	.userHeadPic {
		position: relative;
		float: left;
		width: 140rpx;
		height: 140rpx;
		border-radius: 120rpx;
		background-color: #CCC;
		background-image: url('/static/icon/head.png');
		background-size: cover;
		background-position: center;
	}

	.userInfo {
		// position:relative;
		// float:left;
		// padding:10rpx;
		// margin-left:10rpx;
		/* position: relative; */
		float: left;
		/* padding: 10rpx; */
		margin-left: 29rpx;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		&-title {
			width: 350rpx;
			font-size: 30rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: flex;
			flex-direction: row;
		}
	}

	.authLink {
		float: right;
		width: 100rpx;
		background-color: $globalColor;
		color: #000;
		border-radius: 120rpx 0rpx 0rpx 120rpx;
		padding: 10rpx;
		padding-left: 20rpx;
		font-size: 24rpx;
	}

	.countLink {
		clear: both;
		width: 80%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx
	}

	.count {
		width: 60rpx;
		font-size: 28rpx;
		text-align: center;
		font-weight: bold
	}

	.countName {
		width: 60rpx;
		text-align: center;
	}

	.MemberBoxs {
		clear: both;
		width: 94%;
		margin: auto;
		margin-top: 20rpx;
		background-color: #FFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.MemberRegLink {
		height: 100rpx;
		padding: 20rpx;
		background-color: $globalColor;
		color: #000;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
	}

	.MemberBox {
		width: 80vw;
		margin: auto;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #FFF;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
	}

	.QuickLinkBox {
		background-color: #FFF;
		margin-top: 20rpx
	}

	.quickLink {
		display: flex;
		justify-content: space-between;
		height: 60rpx;
		line-height: 60rpx;
		padding: 20rpx;
		border-bottom: 1rpx solid #f0f0f0
	}

	.listIcon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.noline {
		border-bottom: 0rpx;
	}

	.myLink {
		width: 60rpx;
		text-align: center;
	}

	.myLinkIcon {
		width: 50rpx;
		height: 50rpx;
		// background-color: #CCC;
		border-radius: 50rpx;
		margin: auto
	}

	.myLinkIcon image {
		width: 50rpx;
		height: 50rpx;
	}

	.myLinkName {
		width: 60rpx;
		text-align: center;
		margin-top: 10rpx
	}

	.vipIcon {
		width: 80rpx;
		height: 80rpx;
		// background-color: #CCC;
		text-align: center;
		border-radius: 80rpx;
		margin: 10rpx;
	}

	.vipIcon image {
		width: 80rpx;
		height: 80rpx;
	}

	.openVipBtn {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #000;
		color: #FFF;
		border-radius: 50rpx;
		margin: 30rpx;
		font-size: 24rpx;
	}

	.exitBtn {
		width: 80vw;
		margin: auto;
		margin-top: 20rpx;
		background-color: $globalColor;
		color: #000;
		height: 80rpx;
		border-radius: 10rpx;
		font-size: 32rpx;
		line-height: 80rpx;
	}




	// =======================================?
</style>